<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟一个数据监测</title>
</head>
<body>
    
<h1>模拟一个数据监测</h1>

<script>

let data = {
    name: '老马',
    age: 20
}

// 创建一个监视对象
const obs = new Observer(data)

// 准备一个vm实例
const vm = {}
vm._data = data = obs

function Observer(obj) {
    // 汇总对象中的所有属性形成一个数组
    const keys = Object.keys(obj)
    keys.forEach((k) => {
        Object.defineProperty(this,k,{
            get() {
                return obj[k]
            },
            set(val) {
                console.log(`${k}被修改，开始解析模板`);
                obj[k] = val
            }
        })
    })
}

</script>
</body>
</html>